<template>
    <view>
        <view class="question-list">
            <view class="question-card">
                <view class="card" v-for="(item, index) in list" :key="index" @click="gotoDetail(item.id,item.description)">
                    <view class="img">
                        <img :src="item.thumb_image" alt="">
                    </view>
                    <view class="content">
                        <view class="content-f">
                            {{ item.name }}
                        </view>
                        <view class="content-f">
                            <text class="tn-icon-video content-f-img"></text>
                            <text style="margin-left: 10rpx;">{{ item.total_num }}人看过</text>
                        </view>
                        <view class="content-f" style="color: red;">
                            ￥{{ item.salesprice }}
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 加载状态条 -->
        <view class="cu-load bg-grey" :class="loadFlag" v-show="list.length == 0"></view>

        <tui-loading v-if="showLoading"></tui-loading>
        <tui-no-data imgUrl="/static/img/img_noorder_3x.png" v-if="list.length == 0">暂无数据</tui-no-data>

    </view>
</template>

<script>
import newsApi from "@/common/api/news.js"
export default {
    data() {
        return {
            showLoading: false,
            showNodata: true,
            list: [],
            loadFlag: 'loading',
            current_page: 1,
            has_more: 0
        }
    },
    computed: {
    },
    onLoad(e) {
        this.search(e.subjectId)
    },
    async onReachBottom() {
        console.log("onReachBottom")
        if (this.has_more > 0) {
            this.current_page++
            this.search()
        }
    },
    methods: {
        search(e) {
            this.loadFlag = 'loading'
            this.has_more = 0
            let params = {
                page: this.current_page,
                subject_id:e
                // category_id:0,
                // tag_id:2
            }
            newsApi.xilueduLists(this, params).then(res => {
                console.log('res-wy', res.data);
                if (res && res.data) {
                    this.list = this.list.concat(res.data.data)
                    this.has_more = res.data.total
                    this.current_page = res.data.current_page
                    this.loadFlag = 'over'
                }
            })
        },
        gotoDetail(e,description) {
            this.utils.goto(`/pagesSubject/videoDetail?category_id=${e}&description=${description}`)
        },

    }
}
</script>

<style scoped lang="scss">
.question-list {
    padding: 0 20rpx;
}

.question-card {
    margin-top: 20rpx;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320rpx, 1fr));
    /* 两列布局 */
    gap: 20rpx;
    /* 卡片间距 */
}

.card {
    width: 100%;
    background: #ffffff;
    border-radius: 10rpx;

    .img {
        width: 100%;
        height: 200rpx;

        image {
            height: 100%;
            border-radius: 10rpx;
        }
    }

    .content {
        padding: 0 10rpx 10rpx 10rpx;
        font-size: 30rpx;

        .content-f {
            margin-top: 20rpx;
            width: 100%;
            /* 设置容器宽度 */
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏溢出的文本 */
            text-overflow: ellipsis;

            /* 超出部分显示为省略号 */
            .content-f-img {
                font-size: 32rpx;
                color: #82B2FF;
                font-weight: 500;
            }
        }
    }
}
</style>
